<script setup>
import { videoGetByIdService, videoGetService } from '@/api/video';
import { throttle } from '@/utils/lodash';
import { 
  Close
} from '@element-plus/icons-vue'
import { ref, computed, watch, nextTick, onMounted } from 'vue';

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  videoId: { type: Number, default: null }
});

const emit = defineEmits(['update:modelValue', 'up', 'down']);

const showDialog = computed({
  get: () => {
    if (props.modelValue === true && props.videoId != null) {
      getVideo();
      nextTick(() => {
        containerRef.value?.focus();
      });
    }
    return props.modelValue;
  },
  set: (value) => {
    emit('update:modelValue', value)
  }
});

watch(
  () => props.videoId,
  (newId, oldId) => {    
    if (newId) {
      getVideo();
    }
  }
);

// 视频数据
const video = ref(null);
const videoRef = ref(null);
async function getVideo() {
  video.value = (await videoGetByIdService(props.videoId)).data.data;
  await nextTick();
  videoRef.value.play();
  // 键盘移动切换视频会导致失焦，在这里手动focus（具体原因不知）
  containerRef.value.focus(); 
}

/* 监听键盘事件 */
const containerRef = ref(null);
function keyDownListener(event) {
  event.stopPropagation();

  if (event.key === 'ArrowUp') {
    emit('up');
  } else if (event.key == 'ArrowDown') {
    emit('down');
  } else if (event.key === 'Escape') {
    showDialog.value = false;
  }
}
const throttleKeyDownListener = throttle(keyDownListener, 400);
onMounted(async () => {
  containerRef.value.addEventListener('keydown', throttleKeyDownListener);
})

// 鼠标悬停关闭按钮
const isMouseInClose = ref(false);

// 鼠标移动
const isMouseMove = ref(false);
let hideTimer = null; 

function handleMouseMove() {
  isMouseMove.value = true;

  if (hideTimer) {
    clearTimeout(hideTimer);
  }

  hideTimer = setTimeout(() => {
    if (!isMouseInClose.value) {
      isMouseMove.value = false;
    }
    hideTimer = null;
  }, 1500);
}

</script>

<template>
  <Teleport to="body">
    <div ref="containerRef" v-show="showDialog" @mousemove="handleMouseMove" tabindex="0">
      <yx-video
        v-if="showDialog && video"
        ref="videoRef"
        :src="video.url"
        :videoId="video.id"
        :creatorId="video.creatorId"
        :creatorName="video.creatorName"
        :creatorAvatar="video.creatorAvatar"
        :description="video.description"
        :likes="video.likes"
        :comments="video.comments"
        :favorites="video.favorites"
        :is-followed="video.isFollowed"
        :is-liked="video.isLike"
        :is-favorited="video.isFavorite"
      />
      <el-icon v-show="isMouseMove" @click="showDialog = false" @mouseenter="isMouseInClose = true" @mouseleave="isMouseInClose = false" style="font-size: 30px; position: absolute; top: 8px; left: 8px; border-radius: 50%; border: 2px solid white; cursor: pointer; z-index: 10001;"><Close /></el-icon>
    </div>
  </Teleport>
</template>

<style lang="scss" scoped>
div {
  position: fixed;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
</style>